<template>
  <div ref="funnel" :style="{ width: '100%', height: 'calc(100% - 52px)',marginTop: '10px' }"></div>
</template>

<script>
export default {
  name: "funnel",
  data() {
    return {
      funnelEcharts: null,
      colors: [
        "#1cd389",
        "#668eff",
        "#ffc751",
        "#ff6e73",
        "#8683e6",
      ],
      lineargroup: [
        {
          value: 45,
          name: "目标",
          oriname: "意向",
          number: 45,
          //color: ["rgba(29,211,137,0.8)", "rgba(29,211,137,0)"]
        },
        {
          value: 35,
          name: "方案率",
          oriname: "方案",
          number: 35,
          // color: ["rgba(102,142,255,0.7)", "rgba(102,142,255,0)"]
        },
        {
          value: 15,
          name: "商務率",
          oriname: "商務",
          number: 15,
          // color: ["rgba(255,198,82,0.6)", "rgba(255,198,82,0)"]
        },
        {
          value: 5,
          name: "成交率",
          oriname: "即將成交",
          number: 5,
          // color: ["rgba(255,110,115,0.5)", "rgba(255,110,115,0)"]
        }
      ],
    };
  },
  methods: {
    init() {
      this.funnelEcharts = this.$echarts.init(this.$refs.funnel);
      var data1 = [];
      var data2 = [];

      for (var i = 0; i < this.lineargroup.length; i++) {
        var obj1 = {
          value: this.lineargroup[i].value,
          num: this.lineargroup[i].number,
          name: this.lineargroup[i].oriname,
        };

        var obj2 = {
          value: this.lineargroup[i].value,
          name: this.lineargroup[i].name,
          itemStyle: {
            opacity: 0,
            /*normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: lineargroup[i].color[1]
                }, {
                    offset: 1,
                    color: lineargroup[i].color[0]
                }]),
                borderWidth: 0,
                opacity: 1
            }*/
          },
        };
        data1.push(obj1);
        data2.push(obj2);
      }
      this.funnelEcharts.setOption({
        color: this.colors,
        series: [
          {
            top: 0,
            type: "funnel",
            gap: 8,
            minSize: 96,
            left: "20%",
            width: "60%",
            label: {
              show: true,
              position: "inside",
              fontSize: "20",
              color:"#0f1e53",
                fontWeight:600,
              formatter: function (d) {
                var ins = `${d.percent}%`;
                return ins;
              }
            },
            data: data1,
          },
          {
            top: 0,
            type: "funnel",
            gap: -1,
            minSize: 96,
            left: "20%",
            width: "60%",
            z: 2,
            label: {
              normal: {
                position: "right",
                formatter: function (d) {
                  var ins = "{aa|" + d.name + "}";
                  return ins;
                },
                rich: {
                  aa: {
                    align: "center",
                    color: "#00fbfc",
                    fontSize: "18",
                    // lineHeight: "30",
                  }
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: data2,
          },
        ],
      });
    },
  },
  mounted() {
      this.init()
  },
};
</script>

<style lang="scss" scoped>
</style>